<template>
  <div class="t-table" style="width:100%;">
    <!--highlight-current-row 选中行高亮-->
    <WfTable
            :searchFormData="searchFormData"
            :has-form="hasForm"
            :table="table"
             ref="wfTable"
             columnSetting
            :columns="table.columns"
            isCopy
            :pagination="pagination"
            :is-show-pagination="true"
            @getList="getList"
            @pageChange="pageChange"
            @pageSizeChange="pageSizeChange"
            @selectChange="selectChange">   <!--@radioChange 单选的变化-->
      <!--有点奇怪-->
      <div>
        <template>
          <el-form :model="searchFormData" :inline='true' label-width="100px" ref="ruleForm" >
            <div>
              <el-form-item label="配置名称：" prop="a">
                <el-input v-model="searchFormData.a" clearable placeholder="请输入配置a名称" size="mini"/>
              </el-form-item>
              <el-form-item label="配置名称c:" prop="b">
                <el-input v-model.trim="searchFormData.b" clearable placeholder="请输入b名称" size="mini"/>
              </el-form-item>
              <el-form-item label="参数标识：" prop="c">
                <el-select v-model="searchFormData.c" clearable placeholder="请选择参数c标识" size="mini">
                  <el-option label="c1" value="c1"/>
                  <el-option label="c2" value="c2"/>
                </el-select>
              </el-form-item>
              <el-form-item label="参数标识b：" prop="d">
                <el-select v-model="searchFormData.d" clearable placeholder="请选择d标识" size="mini">
                  <el-option label="b1" value="b1"/>
                  <el-option label="bb2" value="bb2"/>
                </el-select>
              </el-form-item>
              <el-form-item label="参数标识e：" prop="e">
                <el-select v-model="searchFormData.e" clearable placeholder="请选择e标识" size="mini">
                  <el-option label="e1" value="e1"/>
                  <el-option label="e2" value="e2"/>
                </el-select>
              </el-form-item>
              <el-form-item label="参数标识f：" prop="f">
                <el-select v-model="searchFormData.f" clearable placeholder="请选择f标识" size="mini">
                  <el-option label="f" value="f"/>
                  <el-option label="f2" value="f2"/>
                </el-select>
              </el-form-item>
              <el-form-item label="爱好：" prop="hobby">
                <el-select v-model="searchFormData.hobby" clearable placeholder="请选择hobby" size="mini">
                  <el-option v-for="item in hobbyList" :label="item.label" :value="item.id" :key="item.id"/>
                </el-select>
              </el-form-item>

              <!--    <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker :picker-options="pickerOptionsStart" v-model="searchFormData.startTime"
                                    type="date" placeholder="选择日期时间" size="mini">
                    </el-date-picker>
                  </el-form-item>

                  <el-form-item label="结束时间:" prop="endTime">
                    <el-date-picker :picker-options="pickerOptionsEnd" v-model="searchFormData.endTime"
                                    type="date" placeholder="选择日期时间" size="mini">
                    </el-date-picker>
                  </el-form-item>-->
            </div>
          </el-form>
        </template>
      </div>

      <template slot="sex" slot-scope="{scope}">
        <div v-show="scope.sex=='0'">
          <span>女</span>
        </div>
        <div  v-show="scope.sex=='1'">
          <span>男</span>
        </div>
      </template>

      </WfTable>


    </div>
</template>

<script>
  import WfTable from '../component/table/src/index';
  export default {
    components:{
      WfTable
    },
    name:"table1",
    created() {

    },
    mounted() {
      for (let i = 0; i < 10; i++) {
        let obj = {
          id:Math.floor(Math.random()*100),
          date: '2019-09-25',
          name: '李四'+i,
          sex:"0",
          status: '2',
          address: '江苏省'+i
        }
        this.table.data.push(obj)
        this.pagination.total = this.table.data.length
      }
    },
    data () {
      let self = this
      return {
        hasForm:true,
        searchFormData: {
          a: "",
          b: "",
          c: "",
          d: "",
          e: "",
          f: "",
          startTime: "",
          endTime: "",
          hobby: ""
        },
        hobbyList: [
          {id: 1, label: "吃饭"},
          {id: 2, label: "睡觉"},
          {id: 3, label: "打豆豆"},
        ],

        pagination: {
          pageSize: 5, // 每页显示条数
          currentPage: 1, // 当前页
          // pagerCount: 6, // 按钮数，超过时会折叠
          pageOptions:[5,10,20,50],
          total: 100// 总条数
        },
        table: {

          // firstColumn: { type: 'index', label: '序列' },
          // firstColumn: { type: 'radio', label: '' ,width:30},
          firstColumn: { type: 'selection', label: '' ,width:30},
          changeColor: { key: 'status', val: '3', txtStyle: '#ef473a' },
          data: [
            {
              id: '1',
              date: '2019-09-25',
              name: '张三',
              sex:"0",
              status: '2',
              address: '广东省广州市天河区'
            },
            {
              id: '2',
              sex:"0",
              date: '2019-09-26',
              name: '张三1',
              status: '1',
              address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
            },
            {
              id: '3',
              sex:"1",
              date: '2019-09-27',
              name: '张三2',
              status: '3',
              address: '广东省广州市天河区3'
            },
          ],
          columns: [
            {
              prop: 'name',
              label: '姓名',
              minWidth: '100'
            },
            {
              prop: 'sex',
              label: '性别',
              minWidth: '100',
              slotName:"sex"
            },
            {
              prop: 'date',
              label: '日期',
              minWidth: '180'
            },
            //自定义标头渲染
            {
              prop: 'address',
              label: '地址',
              minWidth: '220',
              renderHeader: (h, {column}) => {
                return (
                  <div>
                    <span>{column.label}</span>
                    <el-tooltip class="tooltip" effect="dark" placement="right">
                      <ul slot="content">
                        <li>这是第二个地址a </li>
                        <li>这是第二个地址</li>
                      </ul>
                      <i class="el-icon-question"/>
                    </el-tooltip>
                  </div>
                )
              }
            },
            {
              prop: 'customRender',
              label: 'customRender',
              minWidth: '220',
              customRender:{
                comps:[
                  {
                    comp: 'el-link',
                    text: '编辑',
                    bind: {
                      type: 'primary'
                    },
                    event:(scope)=>{
                      return {
                        click:()=>{
                          // console.log("scope",scope)
                          this.xxx(scope) //
                        }
                      }
                    }
                  },
                  {
                    comp: 'el-popconfirm',
                    bind: {
                      title: '确认删除该条数据？'
                    },
                    event:(scope)=>{
                      return {
                        confirm :()=> {   //想用this 必须写成箭头函数的形式
                          this.xxx(scope.row)
                        }
                      }
                    },
                    child: [
                      {
                        slot: 'reference',
                        comp: 'el-link',
                        text: '删除',
                        bind: {
                          type: 'primary'
                        }
                      }
                    ]
                  },
                ],
              }
            },

            {
              label: '状态',
              minWidth: '180',
              render:(_,row,index) => {
                console.log("row,index",row,index)
                /* function f() {
                   console.log("a")
                 }*/
                var type = ''
                var val = ''
                switch (row.status) {
                  case '1':
                    type = ''
                    val = '待处理'
                    break
                  case '2':
                    type = 'warning'
                    val = '进行中'
                    break
                  case '3':
                    type = 'success'
                    val = '已完成'
                    break
                }
                return (
                   <el-tag v-show={!!val} type={type}>
                   {val}
                   </el-tag>
                  /*<div onClick={this.add} style="color:red;"><span style="font-weight:bold">{val}</span></div>*/
                )
              }
            },

          ],
         // 表格外操作，选中表格某行，可以将其数据传出
          toolbar: [
            {
              text: '操作1',
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
              fun: this.getBack
            },
            {
              text: '操作2',
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
              fun: this.getBack
            },
            {
              text: 'drop操作',
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
              fun: this.getBack2,
              operateList:[
                {label:"操作1",value:1},
                {label:"操作2",value:2},
                {label:"操作3",value:3},
              ]
            },
            {
              text: 'drop操作2',
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
              fun: this.getBack3,
              operateList:[
                {label:"操作11",value:11},
                {label:"操作21",value:21},
                {label:"操作31",value:31},
              ]
            }
          ],
          // 表格内操作列
          operator: [
            {
              text: '新增',
              type: 'primary',
              fun: this.add,
              icon: 'el-icon-delete',
              // status为1时，不显示此按钮
              noshow: [{ key: 'status', val: ["1"] },{key:"sex",val:["0"]},{key:"xxx",val:["xxx"]}]  // 或的关系
            },
            {
              text: '编辑',
              type: 'danger',
              // status值为2时，展示此按钮
              // show: { key: 'status', val: ['2'] },
              fun: this.edit
            },
            {
              text: '删除',
              // fun: this.del,
              render: (_,row,index) => {
                console.log("row, index",row, index)
                return (
                  <el-popconfirm
                    title="你确定要删除吗？"
                    onConfirm={() => this.del(row)}
                  >
                    <div slot="reference" type="link">
                      删除
                    </div>
                  </el-popconfirm>
                )
              }
            }
          ],
          // 操作列样式
          operatorConfig: {
            fixed: 'right', // 固定列表右边（left则固定在左边）
            width: 280,
            label: '操作'
          }
        },
      }
    },
    methods: {
      // 新增
      add (val,index,tableData) {
        console.log('新增', val,index,tableData)
      },
      // 编辑
      edit (val,index,tableData) {
        console.log('编辑', val,index,tableData)
      },
      // 删除
      del (val,index,tableData) {
        console.log('删除', val,index,tableData)
        // this.$confirm('是否永久删除该项, 是否继续?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   console.log('删除', val)
        // }).catch(() => {
        //   this.$message.info('已取消删除')
        // })
      },
      xxx(scope){
        console.log("xxx",scope)
      },

      selectChange(selection,row){
        // 选中的, 点击的
        console.log(selection,row)
      },

      pageChange(val){
        console.log(val)
        this.pagination.currentPage = val.pageNum
        // 发送请求
      },
      pageSizeChange(val){
        console.log(val)
        this.pagination.pageSize = val.pageSize

        // 发送请求
      },

      getBack (row) {
        console.log('选中行返回的数据', row)
      },
      getBack2(val){
        console.log("getBack2",val)
      },
      getBack3(val){
        console.log("getBack3",val)
      },
      getList(data){
        console.log("表单数据",data)
        let params = {
          pageSize: this.pagination.pageSize,
          pageNum: this.pagination.currentPage,
          ...data,
        }
        console.log("查询的params",  params )
      }

    }
  }
</script>

<style scoped>

</style>



